<template>
    <div class="goods-detail-cont">
        <!-- 面包屑 -->
        <div class="detail-cont">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品详情</el-breadcrumb-item>
                <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="" style="display: flex; align-items: center;background-color: #fff; width: 5.5rem;">
            <div class="goods-title"  v-if="user.qx.qx12 == 1">
                {{ goodsDetail.name }}
            </div>
            <img :src="goodsDetail.code" alt="" style="width: .2908rem; height: .2908rem;margin-left: .5rem;" />
        </div>
        <div class="goods-cont">
            <div class="goods-left">

                <div class="goods-info" style="align-items: flex-end;}">


                    <div class="info-text">实物图片及其它</div>
                    <!-- {{ imgs }} -->
                      <!-- <img :src="imgs" alt=""> -->
                    <el-image style="width: 1.5625rem; height:2rem" :src="imgs" :zoom-rate="1.2"
                        :preview-src-list="uimgs" :initial-index="1" :crossorigin="null" fit="cover" />
                    <!-- <img :src="imgs" alt="" style="width: 1.5625rem; height: 80%" /> -->

                    <div class="intro-cont">
                        <h2>商品参数</h2>
                        <p v-if="user.qx.qx13 == 1"><i>规格:</i><b>{{ goodsDetail.spec_name }}</b></p>
                        <p v-if="user.qx.qx12 == 1"><i>名称:</i><b>{{ goodsDetail.name }}</b></p>
                        <p v-if="user.qx.qx14 == 1"><i>库存:</i><b>{{ goodsDetail.stock }}{{ goodsDetail.unit }}</b></p>
                        <p v-if="user.qx.qx15  == 1"><i>产品编号:</i><b>{{ goodsDetail.sn }}</b></p>
                        <p v-if="user.qx.qx16 == 1"><i>产品工艺:</i><b>{{ goodsDetail.technology_name }}</b></p>
                        <p v-if="user.qx.qx17 == 1"><i>产品类别:</i><b>{{ goodsDetail.classification_name }}</b></p>
                        <p v-if="user.qx.qx18 == 1"><i>平方:</i><b>{{ goodsDetail.square }} ㎡</b></p>
                        <p v-if="user.qx.qx20 == 1"><i>立方:</i><b>{{ goodsDetail.cube }}m³</b></p>
                        <p v-if="user.qx.qx19 == 1"><i>重量:</i><b>{{ goodsDetail.weight }}kg</b></p>
                        <p v-for="(item, index) in goodsDetail.json"><i>{{ item.name }}:</i><b>{{ item.value }}{{ item.unit
                        }}</b></p>
                    </div>
                    <div class="info-text img-info">元素图片(左边窗口查看更多)</div>
                    <div class="download">
                        <el-image style="width: 1.5625rem; height:2rem" :src="url"
                            :zoom-rate="1.2" :preview-src-list="uimgs" :initial-index="1" :crossorigin="null" fit="cover" />
                        <!-- <img :src="imgs" alt="" style="width: 1.5625rem; height: 90%" /> -->
                    </div>
                </div>
                <div class="goods-img">
                    <!-- <img v-for="item in imgArr" :src="item" alt=""> -->
                    <el-image v-for="item in imgArr" style="width: .2604rem; height: .2604rem;" :src="item" alt="" :preview-src-list="imgArr" ></el-image>
                    <div class="img-num" v-if="srcList.length - 4 > 0">{{ srcList.length - 4 }}</div>
                </div>


                <div>

                </div>
            </div>
            <div class="goods-right">
                <!-- <div>
                    <el-row :gutter="20">
                        <el-col :span="8" :offset="0">
                            <div class="num">数量:</div>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-input-number v-model="num" :min="1" @change="handleChange" class="custom-input" />
                        </el-col>
                    </el-row>
                </div> -->
                <div class="price-box" style="margin-top: 0.1rem;">
                    <el-row :gutter="20" v-if="user.qx.qx21 == 1">
                        <el-col :span="12" :offset="0">
                            <div class="num">商品价格:</div>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <div class="price-cont" @click="handleLook" v-if="!user.userinfo">
                                查看价格
                            </div>
                            <div class="price-cont" v-else>
                                ￥{{ (goodsDetail.goods_price * num).toFixed(2) }}
                            </div>
                        </el-col>
                    </el-row>

                </div>
                <div class="price-box" style="margin-top: 0.1rem" v-if="user.qx.qx22 == 1">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0" >
                            <div class="num">散装车费:</div>
                        </el-col>
                        <el-col :span="8" :offset="0">

                            <div class="price-cont">
                                ￥{{ goodsDetail.car_price }}
                            </div>
                        </el-col>
                    </el-row>

                </div>

                <div class="btn" @click="handleAdd(1)">
                    添加到订单列表1
                </div>
                <div class="btn" @click="handleAdd(2)">
                    添加到订单列表2
                </div>
                <div class="btn" @click="handleAdd(3)">
                    添加到订单列表3
                </div>

                <div v-if="user.userinfo">
                    <div class="goods-list" @click="handleCart">查看我的订单列表</div>
                    <div class="goods-count"><i>{{ total }}</i>件</div>
                </div>
            </div>
        </div>
        <!-- 商品导航栏 -->
        <div class="nav-cont">
            <ul>
                <li v-if="user.qx.qx23 == 1" :class="isactive == 1 ? 'active' : ''" @click="handleActive(1)">其它详情</li>
                <li v-if="user.qx.qx24 == 1" :class="isactive == 2 ? 'active' : ''" @click="handleActive(2)">包装方案</li>
                <li v-if="user.qx.qx25 == 1" :class="isactive == 3 ? 'active' : ''" @click="handleActive(3)">物流方案</li>
                <li v-if="user.qx.qx26 == 1" :class="isactive == 4 ? 'active' : ''" @click="handleActive(4)">安装方案</li>
                <li :class="isactive == 5 ? 'active' : ''" @click="handleActive(5)">视频</li>
            </ul>
        </div>

        <div class="bg-cont1">
        </div>
        <div class="goods-text-cont" v-if="isactive == 5" v-html="goodstext">
        </div>

        <div class="goods-text-cont" style="display: flex; justify-content: center">
            <video v-if="isactive == 5" controls :src="goodsDetail.file" style="width: 300px;"></video>
        </div>
        <div class="cart-list">
            <h2>订单列表</h2>
            <div class="orderBtn" id="bom">
                <div v-if="user.qx.qx27 == 1" :class="activeType == 1 ? 'btn' : 'active'" @click="getActiveType(1)">
                    订单列表1
                </div>
                <div v-if="user.qx.qx27 == 1" :class="activeType == 2 ? 'btn' : 'active'" @click="getActiveType(2)">
                    订单列表2
                </div>
                <div v-if="user.qx.qx27 == 1" :class="activeType == 3 ? 'btn' : 'active'" @click="getActiveType(3)">
                    订单列表3
                </div>
            </div>
            <MyCartlist ref="bom" :lists="goodslists" :type="activeType" />
        </div>
    </div>
</template>

<script setup>
import { ArrowRight, CollectionTag } from '@element-plus/icons-vue'
import { computed, ref, watch, nextTick, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { GoodsDetail } from '../../api/goods'
import { useUser } from '../../store/user';
import { ElMessage, ElMessageBox } from 'element-plus'
import { CartAdd, UserCart, CartCalc } from '../../api/user'
import MyCartlist from './components/my-cartlist.vue'

const route = useRoute()
const router = useRouter()
let { id, name, typeRef } = route.query
const user = useUser()
// let { token } = user.userinfo
const url = ref('')
const urlArr = ref([])
const srcList = ref([])
const imgs = ref('')
const activeType = ref("1")
// 加入购物车
const num = ref(1)
const handleChange = (value) => {
    num.value = value
}
onMounted(() => {
    console.log(typeRef, "=====");
    if (typeRef) {
        nextTick(() => {
            const child = document.querySelector(`#bom`) // 需要滚动的元素
            console.log(child);
            window.scrollTo({
                top: 99999999,
                behavior: "smooth"
            })

        })
    }
})


// 控制菜单
const isactive = ref(1)


const handleActive = (num) => {
    isactive.value = num
}

// 获取商品详情信息
const goodsDetail = ref({})
if (user.userinfo) {
    var { token } = user.userinfo

}
let uimgs = ref([])
let res = await GoodsDetail(id, token)
let info = res.data.data
goodsDetail.value = info
url.value = info.design_image
uimgs.value.push(info.design_image)
urlArr.value.push(info.design_image)
imgs.value = info.image
uimgs.value.push(info.image)
console.log(uimgs.value,"===asduk=");
srcList.value = info.other_images
let { goods_remark, package_scheme, shipping_scheme, install_scheme } = res.data.data

const total = ref(0)

// 计算属性

const imgArr = computed(() => {
    let arr = srcList.value.slice(0, 4)
    return arr
})
const getCartCalc = () => {
    let { token } = user.userinfo
    CartCalc(token).then(res => {
        let { total_num } = res.data.data
        total.value = total_num
        // user.cart = count
    })
}
const goodstext = ref('')
goodstext.value = goods_remark
watch(isactive, (n) => {
    if (n == 1) {
        goodstext.value = goods_remark
    } else if (n == 2) {
        goodstext.value = package_scheme
    } else if (n == 3) {
        goodstext.value = shipping_scheme
    } else if (n == 4) {
        goodstext.value = install_scheme
    }
})

const changeActive = () =>{
    if(user.qx.qx23 == 1){
        isactive.value = 1
    }else if(user.qx.qx24 == 1){
        isactive.value = 2
    }else if(user.qx.qx25 == 1){
        isactive.value = 3
    }else if(user.qx.qx26 == 1){
        isactive.value = 4
    }else{
        goodstext.value = ''
    }
}

changeActive()

const getActiveType = async (e) => {
    activeType.value = e
    let res1 = await UserCart(1, token, activeType.value)
    let { count, lists } = res1.data.data
    goodslists.value = [...lists]
    // total.value = count
    user.cart = count - 0
    getCartCalc()
}

// 消息提示函数
const MyMsg = () => {
    ElMessageBox.confirm(
        '请登录账号',
        '温馨提示',
        {
            confirmButtonText: '去登陆',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            router.push('/login')
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            })
        })
}
// 查看价格
const isLook = ref(true)
const handleLook = () => {
    if (user.userinfo) {
        isLook.value = false
    } else {
        MyMsg()
    }
}
// 用户购物车信息

const goodslists = ref([])
// 添加订单
const handleAdd = (type) => {
    if (!user.userinfo) {
        MyMsg()
    } else {
        let { token } = user.userinfo
        CartAdd(id, num.value, token, type).then(async (res) => {
            ElMessage.success('添加成功')
            let res1 = await UserCart(1, token, activeType.value)
            let { count, lists } = res1.data.data
            goodslists.value = [...lists]
            // total.value = count
            user.cart = count - 0
            getCartCalc()
        })
    }
}

// 跳转购物车
const handleCart = () => {
    if (user.userinfo) {
        router.push('/cart')
    } else {
        MyMsg()
    }
}

// 获取用户购物车信息

if (user.userinfo) {
    let { token } = user.userinfo
    UserCart(1, token).then(res => {
        let { count } = res.data.data
        // total.value = count
        user.cart = count
    })
    getCartCalc()

}


// const downloadImage = () => {
//     const link = document.createElement('a');
//     link.href = url.value; // 替换为你要下载的图片路径
//     link.click();
// }

</script>




<style lang="scss" scoped>
.goods-detail-cont {
    width: 6.9rem;
    margin: auto;
    padding-bottom: 1.1458rem;

    .detail-cont {
        height: .3125rem;

        display: flex;
        align-items: center;

        span {
            font-size: .0833rem;
            font-weight: 400;
            color: #666666;
        }
    }

    .goods-title {
        height: .4908rem;
        background: #FFFFFF;
        border-radius: .0521rem;
        font-size: .1458rem;
        font-weight: bold;
        color: #3F7233;
        line-height: .5208rem;
        padding-left: .1563rem;
    }

    >.bg-cont1 {
        height: .0052rem;
        background: #CCCCCC;
        border-radius: .0052rem;
    }

    >.goods-cont {
        display: flex;
        margin-bottom: .1563rem;

        >.goods-left {
            width: 5.6917rem;
            // height: 2.0833rem;
            background: #FFFFFF;
            border-radius: 0rem 0rem 0rem .0521rem;
            padding: .4042rem .1042rem;
            position: relative;

            >.goods-info {
                // height: 1.5625rem;
                display: flex;

                .info-text {
                    position: absolute;
                    top: .1625rem;
                    left: 13%;
                    font-size: .0938rem;
                    font-weight: bold;
                }

                .img-info.info-text {
                    left: 68%;
                }

                >.intro-cont {
                    margin-left: .2083rem;
                    padding-top: .1042rem;
                    box-sizing: border-box;

                    h2 {
                        width: .3854rem;
                        font-size: .0938rem;
                        font-weight: 400;
                        color: #333333;
                        margin-bottom: .1875rem;
                    }

                    p {
                        font-size: .0833rem;
                        font-weight: 300;
                        color: #666666;
                        margin-bottom: .05667rem !important;
                        display: flex;

                        >i {
                            width: .3854rem;
                            margin-right: .0833rem;
                        }
                    }

                }

                .download {
                    font-size: .0938rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #408AF8;
                    cursor: pointer;
                    margin-left: .0521rem;
                }

            }

            .goods-img {
                margin-top: .0521rem;
                display: flex;

                >img,
                .img-num {
                    width: .2604rem;
                    height: .2604rem;
                    border-radius: .0208rem;
                    margin-right: .0625rem;
                }

                >.img-num {
                    background: #EEEEEE;
                    text-align: center;
                    line-height: .2604rem;
                    font-size: .0938rem;
                    font-weight: bold;
                    color: #333333;
                }
            }

        }

        >.goods-right {
            width: 1.4583rem;
            height: 2.0833rem;
            background: #F5F5F5;
            border-radius: 0rem 0rem .0521rem 0rem;
            padding-top: .0917rem;
            display: flex;
            flex-direction: column;
            align-items: center;

            .num {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: .0938rem;
                font-weight: 400;
                color: #333333;
                margin-left: .1042rem;
            }


            .price-box {
                margin-top: .0823rem;
                margin-bottom: .0708rem;
                width: 100%;
                margin-top: .223rem;

                .el-row {
                    justify-content: center;
                }
            }

            .price-cont {
                width: 100%;
                font-size: .0938rem;
                font-weight: 400;
                color: #E71A1A;
                cursor: pointer;

            }

            .btn {
                width: 1.0417rem;
                height: .3125rem;
                background: #3F7233;
                border-radius: .0208rem;
                font-size: .0938rem;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: .3125rem;
                cursor: pointer;
                margin-bottom: .0763rem;
                margin-bottom: 0.228rem;
            }

            .goods-list {
                font-size: .0938rem;
                font-weight: 400;
                color: #3F7233;
                margin-bottom: .1042rem;
                cursor: pointer;
            }

            .goods-count {
                font-size: .0833rem;
                font-weight: 400;
                color: #3F7233;
                display: flex;
                justify-content: center;
                align-items: center;

                >i {
                    font-size: .125rem;
                    font-weight: bold;
                    margin-right: .0208rem;

                }
            }
        }
    }

    .nav-cont {
        height: .4167rem;
        background: #FFFFFF;
        border-radius: .0521rem .0521rem 0rem 0rem;

        >ul {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: .1042rem;

            >li {
                width: .7292rem;
                height: .2083rem;
                font-size: .0833rem;
                font-weight: 400;
                color: #666666;
                line-height: .2083rem;
                text-align: center;
                cursor: pointer;
            }

            >li.active {
                background: #3F7233;
                color: #FFFFFF;
            }
        }
    }

    .goods-text-cont {
        min-height: 2.0833rem;
        background: #FFFFFF;
        margin-bottom: .1563rem;
        padding: .1563rem 0 .2604rem .3125rem;
    }

    >.cart-list {
        background: #FFFFFF;
        padding: .1563rem;

        >h2 {
            font-size: .0938rem;
            font-weight: bold;
            color: #333333;
            margin-bottom: .1042rem;
        }
    }
}

.custom-input {
    max-width: .625rem;
}

.orderBtn {
    display: flex;
    padding-bottom: .01rem;

    .btn {
        width: 1.0417rem;
        height: .3125rem;
        background: #3F7233;
        border-radius: .0208rem;
        font-size: .0938rem;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        line-height: .3125rem;
        cursor: pointer;
        margin-bottom: .0763rem;
        margin-right: .0763rem;
    }

    .active {
        width: 1.0417rem;
        height: .3125rem;
        border: 1px solid #3F7233;
        color: #3F7233;
        border-radius: .0208rem;
        font-size: .0938rem;
        font-weight: 400;
        // color: #FFFFFF;
        text-align: center;
        line-height: .3125rem;
        cursor: pointer;
        margin-bottom: .0763rem;
        margin-right: .0763rem;
    }
}

.intro-cont {
    // margin-left: .2083rem;
    padding-top: .1042rem;
    box-sizing: border-box;

    h2 {
        width: .3854rem;
        font-size: .0938rem;
        font-weight: 400;
        color: #333333;
        margin-bottom: .1875rem;
    }

    p {
        font-size: .0833rem;
        font-weight: 300;
        color: #666666;
        margin-bottom: .1667rem;
        display: flex;
        margin-right: 0.2rem;

        >i {
            // width: .654rem;
            margin-right: .0833rem;
        }
    }

}
</style>

<style></style>